<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>手机验证</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png" />
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/basic.css" />
    <link rel="stylesheet" href="assets/css/app.css" />
    <style>
        #kuaikuai-user-login form div{ margin-bottom: 0; }
        .form-inline{ width: 50%; display: inline-table; }

        span.message-num{
            display: inline-block;
            float: right;
            padding-right: 10px;
            padding-top: 10px;
            padding-bottom: 7px;
            width: 50%;
            text-align: center;
            background-color: #ffffff;
            border: 1px solid #ccc;
            border-left: none;
            color: #31cc31;
        }

        #kuaikuai-last{
            margin-top: 20px;
        }

        #kuaikuai-last a{
            color: #333333;
        }

        span.lost{ color: #ccc }

        i.r-btn{
            display: inline-block;
            background: url('assets/i/icon/radio-btn.png') no-repeat -28px 0;
            width: 25px;
            height: 25px;
            vertical-align: middle;
            margin-right: 10px;
        }

        i.right{
            background-position: 0 0;
        }
    </style>
</head>
<body>
<header id="kuai-header-title">
    <p class="am-text-sm">为防止用户信息被盗用，请使用本机号码登录</p>
</header>

<div id="kuaikuai-user-login">
    <div class="am-g">
        <div class="am-u-md-8 am-u-sm-centered">
            <form class="am-form">
                <fieldset class="am-form-set">
                    <div class="am-form-group am-form-icon" style="margin-bottom: -1px;">
                        <i class="login-icon icon-user"></i>
                        <input type="tel" id="tel" class="am-form-field" placeholder="手机号码">
                    </div>

                    <div class="am-form-group am-form-icon form-inline">
                        <i class="login-icon icon-pwd"></i>
                        <input type="password" id="pwd" disabled class="am-form-field" placeholder="输入验证码">
                    </div>
                    <span class="message-num">获取验证码</span>
                </fieldset>
                <!-- 点击就添加am-btn-primary样式 -->
                <button type="submit" id="yzm-btn" class="am-btn am-btn-default am-btn-block">登录</button>
            </form>
        </div>
    </div>
</div>

<section id="kuaikuai-last">
    <a href="" id="kuai-ok"><i class="r-btn"></i>同意并接受快快车生活的</a><span style="color: #31cc31;">服务协议</span>
</section>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/js/jquery.min-1.11.1.js" type="text/javascript"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //  验证码
        $('#kuai-ok').on('touchstart', function () {
            $this = $(this);
            $icon = $this.find('.r-btn');
            if($icon.hasClass('right')) {
                $icon.removeClass('right');
                return false;
            } else {
                $icon.addClass('right');
                return false;
            }
        });

        $('.message-num').on('touchstart', function () {
            $this = $(this);
            $this.addClass('lost');
            $this.removeAttr('href');
            if ($this.hasClass('lost')) {
                $('#pwd').removeAttr('disabled');
            } else {
                $('#pwd').attr({ 'disabled' : 'disabled' });
            }
        });

        // 登录按钮有效
        $('#pwd,#tel').bind('blur', function () {
            $tel = $('#tel').val();
            $pwd = $('#pwd').val();
            if ($tel != "" && $pwd != "") {
                $('#yzm-btn').addClass('am-btn-primary');
            } else {
                $('#yzm-btn').removeClass('am-btn-primary');
            }
        });

        $('#yzm-btn').on('touchstart', function () {
            $okI = $('#kuai-ok').find('.r-btn');
            if ($okI.hasClass('right')) {
                console.log('验证可以了');
                return false;
            } else {
                console.log('验证失败了');
                return false;
            }
        });
    });
</script>
</body>
</html>